<template>
  <scroll ref="seriesWrapScroll">
    <span v-if="!views.data"></span>
    <div class="card-container" v-if="views.data">
      <div
        class="card-item"
        v-for="(view, index) of views.data.content_list"
        :key="index"
      >
        <div class="user-info">
          <div class="user-nickname-wrap">
            <div class="user-avatar">
              <img v-lazy="view.icon" />
            </div>
            <div class="nickname-info">
              <div class="user-nickname">{{ view.nickname }}</div>
              <div class="create-time">{{ view.create_time }}发布</div>
            </div>
          </div>
          <div class="user-text">
            {{ view.content }}
          </div>
        </div>
        <div
          class="img-container"
          :class="getImgContClass(view.pic_list.length)"
        >
          <template v-for="(pic, index) of view.pic_list">
            <div class="img-wrap" :key="index" v-if="index < 3">
              <img v-lazy="pic" :style="getImgStyle(pic)" />
            </div>
          </template>
          <div class="all-count-detail" v-if="view.pic_list.length > 3">
            +{{ view.pic_list.length - 3 }}
          </div>
        </div>
        <div class="status-container">
          <span class="read-quantity">{{ view.view_num }}阅读</span>
          <div class="contaniner-right">
            <img
              src="https://m.mi.com/static/img/pre-praise.db3cd290e8.png"
              class="like-icon"
            />
            <span class="like-quantity">{{ view.praise_num }} </span>
            <img
              src="https://m.mi.com/static/img/comment.59b22c4a54.png"
              class="comment-icon"
            />
            <span class="comment-quantity">{{ view.comment_num }}</span>
          </div>
        </div>
        <div class="related-tag" v-if="view.tag_list">
          <a class="tag-contanier" v-for="item of view.tag_list">
            <div class="left">
              <img src="./wellNumber.png" class="left-icon" />
              <div class="info">
                <div class="title">{{ item.tag }}</div>
                <div class="article-num">
                  {{ item.tag_content_num }}正在讨论
                </div>
              </div>
            </div>
            <div class="right">
              <img
                v-lazy="pic"
                class="user-block"
                v-for="pic of item.tag_content_avatar_list"
              />
              <img src="./arrows.png" class="right-icon" />
            </div>
          </a>
        </div>
      </div>
    </div>
  </scroll>
</template>

<script type="text/ecmascript-6">
import Scroll from 'common/scroll/scroll'
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      views: this.data
    }
  },

  created() {
    // console.log(this.data.data.content_list[0].content)
  },
  mounted() {
    this.$refs.seriesWrapScroll.refresh()
  },
  methods: {
    getImgContClass(length) {
      return length === 1 ? 'one-box' : length === 2 ? 'two-box' : 'three-box'
    },
    getImgStyle(url) {
      let index = url.indexOf('?')
      if (index != -1) {
        let params = url.slice(index + 1).split('&')
        let obj = {}
        params.forEach(item => {
          let arr = item.split('=')
          obj[arr[0]] = arr[1]
        })

        let width = 'auto'
        let height = 'auto'
        if (parseInt(obj.w) <= parseInt(obj.h)) {
          width = '100%'
        } else {
          height = '100%'
        }

        return {
          width,
          height
        }
      }
      return {
        width: '100%',
        height: 'auto'
      }
    }
  },
  watch: {
    data(newVal) {
      this.views = []
      this.$nextTick(() => {
        this.views = newVal
      })
    },
    views() {
      this.$nextTick(() => {
        this.$refs.seriesWrapScroll.refresh()
      })
    }
  },
  components: {
    Scroll
  }
}
</script>

<style lang="stylus" scoped ref="stylesheet/stylus">
@import '~assets/stylus/mixin';

.card-container {
  background: #f5f5f5;
  padding: 0.24rem 0;

  .card-item {
    margin: 0 auto 0.24rem;
    padding: 0.36rem 0.24rem;
    width: 6.72rem;
    background-color: #fff;
    border-radius: 0.16rem;
    box-sizing: border-box;

    &:last-child {
      margin: 0 auto;
    }

    .user-info {
      margin-bottom: 0.24rem;

      .user-nickname-wrap {
        margin: auto;
        margin-bottom: 0.36rem;
        display: flex;
        align-items: center;

        .user-avatar {
          margin-right: 0.24rem;
          width: 0.734rem;
          height: 0.734rem;
          border-radius: 1rem;
          vertical-align: middle;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .nickname-info {
          color: #3c3c3c;
          text-align: left;

          .user-nickname {
            font-size: 0.28rem;
            font-family: MI-LANTING _GB-OUTSIDE;
            font-weight: 400;
            color: #000;
            line-height: 0.373rem;
          }

          .create-time {
            font-size: 0.24rem;
            font-family: MI-LANTING_GB-OUTSIDE;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.3);
            line-height: 0.32rem;
          }
        }
      }

      .user-text {
        text-align: left;
        margin: auto;
        font-size: 0.28rem;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.87);
        line-height: 0.38rem;
      }
    }

    .img-container {
      margin-bottom: 0.32rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .img-wrap {
        position: relative;
        overflow: hidden;
        border-radius: 0.12rem;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);

        img {
          display: inline-block;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate3d(-50%, -50%, 0);
          min-width: 100%;
          max-height: 100%;
          border-radius: 0.12rem;
        }
      }

      &.one-box {
        .img-wrap {
          flex: 1;
          width: 100%;
          height: 3.52rem;
        }
      }

      &.two-box {
        .img-wrap {
          flex: 0 0 3rem;
          width: 3rem;
          height: 3rem;
        }
      }

      &.three-box {
        .img-wrap {
          flex: 0 0 1.95rem;
          width: 1.95rem;
          height: 1.95rem;
        }
      }

      .all-count-detail {
        position: absolute;
        right: 0;
        bottom: 0.1rem;
        height: 0.37rem;
        width: 0.6rem;
        text-align: center;
        font-size: 0.28rem;
        color: hsla(0, 0%, 100%, 0.87);
        line-height: 0.37rem;
        z-index: 9;
      }
    }

    .status-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.24rem;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.54);
      line-height: 0.32rem;

      .read-quantity {
      }

      .contaniner-right {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .like-icon {
          height: 0.253rem;
          margin-right: 0.12rem;
          padding-bottom: 0.03rem;
        }

        .like-quantity {
          margin-right: 0.59rem;
        }

        .comment-icon {
          height: 0.253rem;
          margin-right: 0.12rem;
        }

        .comment-quantity {
        }
      }
    }

    .related-tag {
      .tag-contanier {
        margin-top: 0.27rem;
        padding: 0.14rem 0.09rem 0.14rem 0.24rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 0.87rem;
        background: #f8f8f8;
        border-radius: 0.44rem;
        height: 0.87rem;
        box-sizing: border-box;

        .left {
          display: flex;
          align-items: center;

          .left-icon {
            width: 0.46rem;
            height: 0.46rem;
            margin-right: 0.24rem;
          }

          .info {
            text-align: left;
            max-width: 3rem;

            .title {
              font-family: MI-LANTING_GB-OUTSIDE;
              font-weight: 400;
              max-width: 3.62rem;
              height: 0.32rem;
              line-height: 0.32rem;
              font-size: 0.24rem;
              color: #000;
              no-wrap();
            }

            .article-num {
              font-family: MI-LANTING_GB-OUTSIDE;
              height: 0.24rem;
              line-height: 0.24rem;
              font-size: 0.18rem;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.5);
              no-wrap();
            }
          }
        }

        .right {
          .user-block {
            width: 0.387rem;
            height: 0.387rem;
            display: inline-block;
            margin-left: -0.18rem;
            border-radius: 2rem;
          }

          .right-icon {
            height: 0.44rem;
            transform: rotate(-90deg);
          }
        }
      }
    }
  }
}
</style>